
<template>
    <view>
        <view :class="$style.cells">
            <view :class="$style.cell" v-for="(item, index) in rows" :key="index">
                <view :class="$style.name">{{ item.dept }}</view>

                <view :class="$style.dept" v-for="(row, i) in item.contacts" :key="i">
                    <view :class="$style.a">{{ row.tel }}<span v-if="row.location">（{{row.location}}）</span></view>
                    <a style="text-decoration: none;" :href="'tel:' + row.tel"><uni-icons type="phone-filled" color="#0052D9" size="18"></uni-icons></a>
                </view>
                
            </view>
        </view>

    </view>
</template>
<script lang="ts" setup>
import { useGlobalStore } from '@/stores';
import { deptContactsApi } from '@/api/DeptContacts';
import { ref } from 'vue';
    
var pages = getCurrentPages();
    var page = pages[pages.length - 1];
    const id = page.options.id

    const rows = ref<any[]>([])

    function goNav(url:string) {
        uni.navigateTo({url})
    }

    deptContactsApi(id).then(r => {
       document.title = r.data.dept
       rows.value = r.data.depts

    })
</script>


<style lang="scss" module>

    .cells{
        background-color: #fff;
        border-radius: 24rpx;
        padding: 0 $base-space;
        

        .cell{
            padding: 30rpx 0;
            
            .name{
                font-size: 28rpx;
                font-weight: bold;
                color: #000;

                // min-width: 0;
                // overflow: hidden;       /* 隐藏超出的内容 */
                // white-space: nowrap;    /* 不换行 */
                // text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
            }

            .dept{
                margin-top: 8rpx;
                display: flex;
                align-items: center;

                .a{
                    flex: 1;
                    color: $primary-primary;
                    
                }
            }

            

            border-bottom: 1rpx solid #E7E7E7;
            &:last-of-type{
                //border-bottom: none;
            }

            .title{
                flex: 1;
                font-size: 28rpx;
                
                color: rgba(0, 0, 0, 0.9);
            }
        }
    }
</style>